<template>
	<view>
		<view class="app-container">
			<view class="page-section page-section-gap">
				<map :style="{width: 100+'%',height:mapHeight+'px'}" @markertap="tapShow" :latitude="latitude" :longitude="longitude" :markers="markers" :include-points="markers">
				</map>
			</view>
			<actionsheet :actionData="speedData" v-if="isshow">
				<!-- 新手辅助元素 -->
				<view class="farm-speed_header" @tap="speedStatus(statusType)" style="color:rgb(187, 120, 42)">
					<view class="point">
						<image src="/static/down.png" />
						<view class="point__name">
							<image src="/static/enforceInfo.png" />
							<view>{{storeInfo.number.name}}{{storeInfo.number.value}}</view>
						</view>
					</view>
				</view>
				<view class="farm-speed_water" style="margin:22rpx 0">
					
				</view>
				<scroll-view class="shop-base-info" scroll-y style="height:560rpx">
					<view class="item" v-for="(descItem, descIndex) in descData" :key="descIndex" @click="handle(descIndex)">
						<view class="name">{{ descItem.name || ""}}</view>
						<view class="desc">{{ descItem.desc || ""}}</view>
					</view>
					<view class="base">
						<view class="app__title">执法过程</view>
					</view>
					<view class="manage__box" :style="{display:clear}">
						<view class="manage__item">
							<view class="name">过程: </view>
							<view>{{storeInfo.course.value}}</view>
						</view>
					</view>
				</scroll-view>
			</actionsheet>
		</view>
	</view>
</template>

<script>
	import actionsheet from "@/components/actionsheet/actionsheet.vue"
	export default {
		components: {
			actionsheet
		},
		data() {
			return {
				title: 'map',
				latitude: 28.28,
				longitude: 113.80,
				isshow: false,
				scale:10,
				markers: [{
					id:1,
					// title: '违法行为',
					latitude: 28.28,
					longitude: 113.801,
					iconPath: '/static/locationLaw.png',
				}, {
					id:2,
					// title: '违法行为',
					latitude: 28.89,
					longitude: 113.85,
					iconPath: '/static/locationLaw.png',
				}, {
					id:3,
					// title: '违法行为',
					latitude: 28.46,
					longitude: 113.23,
					iconPath: '/static/locationLaw.png',
					// callout:{
					// 	content: '违法行为1',
					// 	display: 'BYCLICK',
					// 	borderRadius:20
					// }
				}, {
					id:4,
					// title: '违法行为',
					latitude: 28.27,
					longitude: 112.98,
					iconPath: '/static/locationLaw.png',
				}],
				// 弹窗设置
				speedData: {
					actionHeight: 360,
					showAction: true
				},
				statusType:true,
				storeInfo:{
					number:{name:"违法编号",value: '10001'},
					enforceTime:{name:"执法时间",value: '2019-12-30'},
					enforceAdmin: {name:"上传人",value: 'aaa'},
					enforceType: {name:"执法类型",value: '远程执法'},
					uploadAdmin: {name:"上传人",value: 'admin'},
					uploadTime: {name:"上传时间",value: '2019-12-30'},
					course: {name:"执法过程",value: ""},
				},
				mapHeight:0
			}
		},
		onLoad(event) {
			// 获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.screenHeight)
					this.mapHeight = res.screenHeight
				}
			});
			// 目前在某些平台参数会被主动 decode，暂时这样处理。
			try {
				this.storeInfo = JSON.parse(decodeURIComponent(event.detailDate));
				if (this.storeInfo){
					this.isshow = true
					this.latitude = 28.28
					this.longitude = 113.801
					this.markers = [{
					id:1,
					// title: '违法行为',
					latitude: 28.28,
					longitude: 113.801,
					iconPath: '/static/locationLaw.png',
				}]
				}
				console.log(this.storeInfo)
			} catch (error) {
				// console.log(error)
				// this.storeInfo = JSON.parse(event.detailDate);
			}
		},
		computed: {
			/* 描述店铺基本数据 电话、行业、地址等 */
			descData() {
				return [ {
						name: this.storeInfo.enforceTime.name,
						desc: this.storeInfo.enforceTime.value,
					}, {
						name: this.storeInfo.enforceAdmin.name,
						desc: this.storeInfo.enforceAdmin.value,
					}, {
						name: this.storeInfo.enforceType.name,
						desc: this.storeInfo.enforceType.value,
					},{
						name: this.storeInfo.uploadAdmin.name,
						desc: this.storeInfo.uploadAdmin.value,
					}, {
						name: this.storeInfo.uploadTime.name,
						desc: this.storeInfo.uploadTime.value,
					}
				]
			}
		},
		methods:{
			speedStatus(statusType) {
				console.log(statusType)
				if (statusType) {
					this.speedData.actionHeight = 700
					this.statusType = !this.statusType
				} else{
					this.speedData.actionHeight = 360;
					this.statusType = !this.statusType
				}
			},
			tapShow(e){
				console.log(e)
				if(e.detail.markerId == 1){
					this.storeInfo = {
					number:{name:"违法编号",value: '10001'},
					enforceTime:{name:"执法时间",value: '2019-12-30'},
					enforceAdmin: {name:"上传人",value: 'aaa'},
					enforceType: {name:"执法类型",value: '远程执法'},
					uploadAdmin: {name:"上传人",value: 'admin'},
					uploadTime: {name:"上传时间",value: '2019-12-30'},
					course: {name:"执法过程",value: ""},
				}
				}else if (e.detail.markerId == 2){
					this.storeInfo = {
					number:{name:"违法编号",value: '10002'},
					enforceTime:{name:"执法时间",value: '2019-12-30'},
					enforceAdmin: {name:"上传人",value: 'bbb'},
					enforceType: {name:"执法类型",value: '远程执法'},
					uploadAdmin: {name:"上传人",value: 'admin'},
					uploadTime: {name:"上传时间",value: '2019-12-30'},
					course: {name:"执法过程",value: ""},
				}
				}else if (e.detail.markerId == 3){
					this.storeInfo = {
					number:{name:"违法编号",value: '10003'},
					enforceTime:{name:"执法时间",value: '2019-12-30'},
					enforceAdmin: {name:"上传人",value: 'ccc'},
					enforceType: {name:"执法类型",value: '远程执法'},
					uploadAdmin: {name:"上传人",value: 'admin'},
					uploadTime: {name:"上传时间",value: '2019-12-30'},
					course: {name:"执法过程",value: ""},
				}
				}else if (e.detail.markerId == 4){
					this.storeInfo = {
					number:{name:"违法编号",value: '10004'},
					enforceTime:{name:"执法时间",value: '2019-12-30'},
					enforceAdmin: {name:"上传人",value: 'ddd'},
					enforceType: {name:"执法类型",value: '远程执法'},
					uploadAdmin: {name:"上传人",value: 'admin'},
					uploadTime: {name:"上传时间",value: '2019-12-30'},
					course: {name:"执法过程",value: ""},
				}
				}
				this.isshow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin item {
		view {
			display: inline-block;
			vertical-align: middle;
			font-size: 26upx;
			color: #333333;
			line-height: 60upx;

			&:first-child {
				color: rgba(153, 153, 153, 1);
			}
		}
	}


	.app-container {
		.app__title {
			position: relative;
			font-size: 30upx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			padding: 34upx 0 24upx 42upx;
			margin: 0 26upx 0 0;
			margin-right: auto;

			&::before {
				position: absolute;
				left: 0;
				display: block;
				content: '';
				width: 10upx;
				height: 32upx;
				background: rgba(67, 107, 230, 1);
			}
		}

		.app__info {
			margin-left: 22upx;
		}

		.point {
			text-align: center;
			overflow: hidden;
			border-bottom: 1upx solid rgba(0, 0, 0, .1);
			// padding-bottom: 46upx;
			image {
				display: inline-block;
				vertical-align: middle;
				margin-right: 20upx;
				width: 28upx;
				height: 28upx;
			}
			&__name {
				margin-bottom:26upx;

				image {
					display: inline-block;
					vertical-align: middle;
					margin-right: 20upx;
					width: 34upx;
					height: 33upx;
				}

				view {
					display: inline-block;
					vertical-align: middle;
					font-size: 36upx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
				}
			}


			&__desc {
				margin-top: 40upx;
				font-size: 24upx;
				color: rgba(244, 54, 54, 1);
			}

			&__offer {
				margin-top: 20upx;
				font-size: 24upx;
				color: #999999;
			}
		}

		.base {
			padding-bottom: 10upx;
			line-height: 30upx;

			&__time {
				margin-left: 48upx;
				@include item;

				.left {
					margin-left: 17upx;
				}
			}
		}

		.manage {
			@include flexLine;

			&__box {
				border: 1upx solid rgba(0, 0, 0, .1);
				border-radius: 8upx;
				padding: 10upx 24upx 10upx;
				margin: 8upx 24upx 24upx 34upx;

				.manage__item-title {
					position: relative;
					font-size: 28upx;
					color: rgba(51, 51, 51, 1);
					padding-left: 26upx;
					margin-bottom: 20upx;
				}

				.manage__item {
					@include item;

					.name {
						margin-right: 12upx;
					}

					.manage__item_right {
						color: #999999;
					}

					.manage__item_left {
						margin-left: 20upx;
					}
				}
			}

			&_info {
				@include fzc(28upx, #436be6);
				margin: 17upx 31upx 0 0;
			}
		}
	}

	.shop-base-info {
		.item {
			@include flexLine;

			* {
				font-size: 26upx;
				line-height: 30upx;
			}

			.name {
				margin: 17upx 0 17upx 26upx;
				width: 180upx;
				@include fzc(26upx, #999);
			}

			.desc {
				margin: 17upx 26upx 17upx 0;
				margin-right: auto;
				@include ellipsis;
				width: 20em;
				@include fzc(26upx, #333);
			}

			.phone {
				margin: 17upx 31upx 17upx 0;
				width: 27upx;
				height: 28upx;
			}

			.location {
				margin: 17upx 31upx 17upx 0;
				width: 25upx;
				height: 30upx;
			}
		}
	}
</style>

